<!--
 Copyright 2020 Makani Technologies LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

{% extends "base.html" %}


{% load utils %}

{% block body_head %}
  <div style="width:1920px">
{% endblock %}

{# TODO: Shorten long lines in all HTML files. #}

{% block head_style %}
  <!-- block head_style -->
  <link rel="stylesheet" href="{{STATIC_URL}}css/plot_style.css" media="all">
  <!-- endblock head_style -->
{% endblock %}


{% block head_plot_js %}
  <!-- block head_plot_js -->
  <script type="text/javascript" src="{{STATIC_URL}}d3/d3.v3.js"></script>
  <script type="text/javascript" src="{{STATIC_URL}}d3/d3.legend.js"></script>
  <script type="text/javascript" src="{{STATIC_URL}}d3/libs/simple_graph.js"></script>
  <!-- endblock head_plot_js -->
{% endblock %}


{# Erase the left_panel #}
{% block left_panel %}
{% endblock %}


{% block main_content %}
  <!-- block main_content -->
  {% if sim_mode %}
    <h4 style="background-color:lightyellow"><b>Showing Simulated Data</b></h4>
  {% endif %}
  <div
      id="id_message" class="col span_{{canvas_cols}}_of_{{canvas_cols}}"
      style="color:red;white-space:pre-wrap;text-align:left;padding-left:10"
  ></div>
  {% block pre_content %}
  {% endblock %}

  {% if order_horizontally %}
    {% for row in views %}
      {% for view in row.stripe %}
        <div class="col span_{{view.grid_width}}_of_{{canvas_cols}}"
             style="border: 1px solid darkgray;">
          <h5>{{view.name}}</h5>
          {% for indicator in view.indicators %}
            <div id="{{indicator.id}}"
                 class="col span_{{indicator.cols}}_of_{{canvas_cols}}"
                 style="border: 1px solid lightgray;"></div>
          {% endfor %}
        </div>
      {% endfor %}
      {% if not forloop.last %}
        <div class="col span_{{canvas_cols}}_of_{{canvas_cols}}">
          <hr>
        </div>
      {% endif %}
    {% endfor %}
  {% else %}
      {% for column in views %}
        <div class="col span_{{column.grid_width}}_of_{{canvas_cols}}">
        {% for view in column.stripe %}
          {% if view %}
            <div class="col span_{{view.canvas_cols}}_of_{{canvas_cols}}"
                 style="border: 1px solid darkgray;">
              {% if view.name %}<h5>{{view.name}}</h5>{% endif %}
              {% for indicator in view.indicators %}
                <div id="{{indicator.id}}"
                     class="col span_{{indicator.cols}}_of_{{canvas_cols}}"
                     style="border: 1px solid lightgray;"></div>
              {% endfor %}
            </div>
          {% endif %}
        {% endfor %}
        </div>
      {% endfor %}
  {% endif %}

  <hr>
  {% block post_content %}
  {% endblock %}
  <!-- endblock main_content -->
{% endblock %}


{% block body_tail_include %}
  <!-- block body_tail_include -->
  <script type="text/javascript">
    var gStoplightValues = {
      "any": {{stoplight_any}},
      "normal": {{stoplight_normal}},
      "warning": {{stoplight_warning}},
      "error": {{stoplight_error}},
      "unavailable": {{stoplight_unavailable}},
    }
  </script>
  <script type="text/javascript" src="{{STATIC_URL}}scripts/visuals/utils_common.js"></script>
  <script type="text/javascript" src="{{STATIC_URL}}scripts/visuals/utils_coords.js"></script>
  <script type="text/javascript" src="{{STATIC_URL}}scripts/visuals/utils_indicator.js"></script>
  <script type="text/javascript" src="{{STATIC_URL}}scripts/visuals/base_plot.js"></script>
  {% for template in fig_templates %}
    <script type="text/javascript" src="{{STATIC_URL}}scripts/visuals/{{plot_defs|attr:template|attr:'javascript'}}"></script>
  {% endfor %}
  <!-- endblock body_tail_include -->
{% endblock %}

{% block body_tail %}
  </div>
{% endblock %}

{% block body_tail_js %}
  <!-- block body_tail_js -->
  var objects = [];

  function initialize() {
    {% if ui_objs_str %}
      var plots = {{ui_objs_str|safe}};
      plots.forEach(function(plot){
        var figObj = new this[plot.template](plot);
        objects.push(figObj);
      });
    {% endif %}
  }

  function update(resp, resetUponUpdate) {
    objects.forEach(function(obj) {
        obj.update(resp, resetUponUpdate);
      });
  }

  {% block layout_tail_js %}
  {% endblock %}
  <!-- endblock body_tail_js -->
{% endblock %}


{% block ready_js %}
  <!-- block ready_js -->
  // Initialize the layouts.
  initialize();
  {% block post_initialize_js %}
  {% endblock %}
  <!-- endblock ready_js -->
{% endblock %}

